<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="author" content="王晨阳">
        <title>标签页（js插件）</title>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <style>
            
        </style>
    </head>
    <body>
        
        <div class="container">
        
          <!-- 1.标签选项 -->
          <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">女装</a></li>
            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">男鞋</a></li>
            <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">特价商品</a></li>
            <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">家具</a></li>
          </ul>
      
          <!-- 2.每一个标签选项对应的内容 -->
          <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="home">
                <ul>
                    <li><a href=""><img src="" alt="图1"></a></li>
                    <li><a href=""><img src="" alt="图2"></a></li>
                    <li><a href=""><img src="" alt="图3"></a></li>
                    <li><a href=""><img src="" alt="图4"></a></li>
                    <li><a href=""><img src="" alt="图5"></a></li>
                </ul>
            </div>
            <div role="tabpanel" class="tab-pane" id="profile">...</div>
            <div role="tabpanel" class="tab-pane" id="messages">...</div>
            <div role="tabpanel" class="tab-pane" id="settings">...</div>
          </div>
      
        </div>

        <script src="bootstrap/js/jquery.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
    </body>
</html>
